<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>喜帖记录</title>
</head>
<body>
<script th:src="@{/scripts/boot.js}"></script>
<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .inputTable tr td{
        padding: 5px 5px;
    }
    .currRowTable tr th{width:150px;font-size: 20px;}
    .currRowTable tr td{width:400px;font-size: 23px;}
    .currRowTable tr td,.currRowTable tr th{padding: 10px}
    .bestNewRowTable tr th{width:150px;font-size: 20px;}
    .bestNewRowTable tr td{width:400px;font-size: 23px;}
    .bestNewRowTable tr td,.currRowTable tr th{padding: 10px}
</style>
<div id="layout1" class="mini-layout" style="width:100%;height:100%;">
    <div showHeader="false" region="north" height="60" style="text-align: center">
        <h1 style="color: orangered">恭贺[韩庆元&&尤大兰]乔迁之喜</h1>
    </div>
    <div showHeader="false" region="south" height="180">
        <div>最新记录    --   序号：<span id="bestNew__indexSort" style="font-size: 25px;color: orangered;font-weight: bold;"></span></div>
        <table class="bestNewRowTable">
            <tr>
                <th>姓名</th>
                <td style="color: #0654ef;font-weight: bold" id="bestNew__name"></td>
                <th>收取方式</th>
                <td id="bestNew__comeResource"></td>
            </tr>
            <tr>
                <th>金额</th>
                <td style="color: #e00f69;font-weight: bold" id="bestNew__moneyNum"></td>
                <th>金额中文</th>
                <td style="color: #e00f69;font-weight: bold" >¥<span id="bestNew__moneyCn"></span></td>
            </tr>
            <tr>
                <th>收支</th>
                <td id="bestNew__comeOrTo"></td>
                <th>备注</th>
                <td id="bestNew__remarks"></td>
            </tr>
        </table>
    </div>
    <div showHeader="false" region="center">

        <div id="layout2" class="mini-layout" style="width:100%;height:100%;">
            <div showHeader="false" region="north" height="300">
                <div id="inputForm">
                    <input id="id" name="id" class="mini-hidden">
                    <table class="inputTable">
                        <tr>
                            <th>姓名</th>
                            <td><input id="name" name="name" class="mini-textbox" required="true" errorMode="border" style="width: 200px"/></td>
                            <th>收取方式</th>
                            <td>
                                <mini-combobox id="comeResource" name="comeResource" textField="text" valueField="value" showPopupOnClick="true"
                                               data="[{text:'现金',value:'现金'},{text:'微信',value:'微信'},{text:'支付宝',value:'支付宝'},{text:'其他方式',value:'其他方式'}]"
                                               value="现金"  required="true" errorMode="border" allowInput="true" showNullItem="true" style="width: 200px"
                                >
                                </mini-combobox>
                            </td>
                        </tr>
                        <tr>
                            <th>金额</th>
                            <td>
                                <input id="moneyNum" name="moneyNum" class="mini-spinner" minValue="0" maxValue="1000000" changeOnMousewheel="false"
                                       format="¥#,0.00" selectOnFocus="true" onvaluechanged="moneyNumValueChanged" style="width: 200px"/>
                            </td>
                            <th>金额中文</th>
                            <td><input id="moneyCn" name="moneyCn" class="mini-textbox" required="true" errorMode="border" style="width: 200px"/></td>
                        </tr>
                        <tr>
                            <th>备注</th>
                            <td colspan="3">
                                <textarea id="remarks" name="remarks" class="mini-textarea" style="width: 460px;height: 120px">秭归</textarea>
                            </td>
                        </tr>
                        <tr>
                            <th>收/支</th>
                            <td>
                                <mini-combobox id="comeOrTo" name="comeOrTo" textField="text" valueField="value" showPopupOnClick="true"
                                               data="[{text:'收取',value:'收取'},{text:'支出',value:'支出'}]"
                                               value="收取"  required="true" errorMode="border" allowInput="true" showNullItem="true" style="width: 200px">
                                </mini-combobox>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td style="float: right;">
                                <a class="mini-button" iconCls="icon-save" onclick="saveData()" plain="false">保存</a>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div showHeader="false" region="center">
                <div>当前录入</div>
                <table class="currRowTable">
                    <tr>
                        <th>姓名</th>
                        <td style="color: #0654ef;font-weight: bold" id="__name"></td>
                        <th>收取方式</th>
                        <td id="__comeResource"></td>
                    </tr>
                    <tr>
                        <th>金额</th>
                        <td style="color: #e00f69;font-weight: bold" id="__moneyNum"></td>
                        <th>金额中文</th>
                        <td style="color: #e00f69;font-weight: bold" >¥<span id="__moneyCn"></span></td>
                    </tr>
                    <tr>
                        <th>收支</th>
                        <td id="__comeOrTo"></td>
                        <th>备注</th>
                        <td id="__remarks"></td>
                    </tr>
                </table>

            </div>
        </div>

    </div>
    <div showHeader="false" region="west" width="450">
        <mini-toolbar style="border-bottom:0;padding:0px;">
            <table >
                <tr>
                    <td style="width:100%;">
                        <a class="mini-button" iconCls="icon-add" onclick="resetForm()" plain="true" tooltip="增加...">增加</a>
                        <a class="mini-button" iconCls="icon-remove" onclick="deleteRow()" plain="true">删除</a>
                    </td>
                    <td style="white-space:nowrap;">
                        <input id="_name" class="mini-textbox" emptyText="请输入姓名" style="width:150px;"/>
                        <a class="mini-button" onclick="search()">查询</a>
                    </td>
                </tr>
            </table>
        </mini-toolbar>
        <div id="qqGrid" class="mini-datagrid" style="width:100%;height:93%;" onselect="gridSelect"
             url="/list"
             idField="id" allowResize="false"
             sizeList="[20,30,50,100]" pageSize="20"
             showHeader="true" title="录入记录" showPager="false">
            <div property="columns">
                <div field="indexSort" width="40" headerAlign="center" allowSort="true">排序</div>
                <div field="name" width="100" headerAlign="center" allowSort="true">名字</div>
                <div field="moneyNum" width="100" headerAlign="center" allowSort="true">金额</div>
                <div field="remarks" width="120" renderer="onGenderRenderer" align="center" headerAlign="center">备注</div>
            </div>
        </div>
    </div>
</div>
<script>
    mini.parse();
    mini.get("qqGrid").load();
    function search(){
        var name = mini.get("_name").getValue();
        mini.get("qqGrid").load({name:name});
    }

    function moneyNumValueChanged(e){
        var moneyNum = this.getValue();
        if (moneyNum) {
            $.getJSON("/toMoneyCn",{moneyNum:moneyNum},function(rs){
                mini.get("moneyCn").setValue(rs.moneyCn);
                $("#__moneyCn").text(rs.moneyCn);
            });
        }
    }

    function gridSelect(e){
        var row = mini.get("qqGrid").getSelected();
        if (!row) {
            return;
        }
        $.ajax({
            url: "/get",
            type: "get",
            data: {id:row.id},
            success: function (rs) {
                for(var id in rs) {
                    var con = mini.get(id);
                    if (con) {
                        con.setValue(rs[id]);
                    }
                    currValueToTable();
                }
            }
        });
    }

    function saveData(){
        var form = new mini.Form("#inputForm");
        form.validate();
        if (form.isValid() === false) return;

        var data = form.getData();
        var json = mini.encode(data);

        $.ajax({
            url: "/saveOrUpdate",
            type: "post",
            contentType: 'application/json; charset=UTF-8',
            data: json,
            success: function (rs) {
                if (rs.code === "1") {
                    mini.get("qqGrid").load();
                    mini.alert("成功！");
                    mini.get("qqGrid").deselectAll();
                    resetForm();
                    bestNewRow();
                }
            }
        });
    }

    function resetForm(){
        mini.get("id").setValue("");
        mini.get("name").setValue("");
        mini.get("moneyNum").setValue("");
        mini.get("moneyCn").setValue("");
        mini.get("remarks").setValue("秭归");
        mini.get("comeOrTo").setValue("收取");
        mini.get("comeResource").setValue("现金");
        conNames.forEach(name=>{
            $("#__" + name).text("");
        })
    }

    function deleteRow(){
        var row = mini.get("qqGrid").getSelected();
        if (!row) {
            return;
        }
        mini.confirm("确定删除记录？", "确定？",
            function (action) {
                if (action === "ok") {
                    var id = row.id;
                    $.ajax({
                        url: "/delete",
                        type: "post",
                        data: {id:id},
                        success: function (rs) {
                            if (rs.code === "1") {
                                mini.get("qqGrid").load();
                                mini.alert("删除成功！");
                                resetForm();
                                bestNewRow();
                            }
                        }
                    });
                }
            }
        );


    }

    var conNames = ["name","comeResource","moneyNum","moneyCn","remarks","comeOrTo","indexSort"];
    function currValueToTable(){
        conNames.forEach(name => {
            if (mini.get(name)) {
                $("#__" + name).text(mini.get(name).getValue());
            }

        })
    }
    for (let i = 0; i < conNames.length; i++) {
        var con = mini.get(conNames[i]);
        if (con) {
            con.on("valuechanged",function(e){
                currValueToTable();
            });
            con.on("enter",function () {
                currValueToTable();
            });
        }

    }

    function bestNewRow(){
        $.ajax({
            url: "/bestNew",
            type: "get",
            success: function (rs) {
                conNames.forEach(name => {
                    $("#bestNew__" + name).text(rs[name]);
                })
                //$("#bestNew__indexSort").text(rs.indexSort);
            }
        });
    }
    bestNewRow();


</script>
</body>
</html>